<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    title="新增供应商"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    width="80vw"
  >
    <div class="page-container">
      <page-form :model="form" layout="vertical" ref="formRef" :rules="formRules">
        <page-form-row>
          <page-form-item field="supplierName" label="供应商名称" required :rules="{ required: true, message: '请输入供应商名称' }">
            <a-input v-model="form.supplierName" placeholder="请输入" :max-length="30" allow-clear />
          </page-form-item>
          <page-form-item field="formSupplierType" label="供应商类型" required :rules="{ required: true, message: '请选择供应商类型' }">
            <a-select placeholder="请选择" multiple v-model="form.formSupplierType" allow-clear>
              <a-option v-for="item in supplierPageData.supplierTypeList" :key="item.value" :value="item.value.toString()">
                {{ item.label }}</a-option
              >
            </a-select>
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import { supplierSave } from '@/api/market/supplier'

  const formRules = ref({
    supplierName: { required: true, message: '请输入', trigger: 'change' },
    supplierType: { required: true, message: '请输入', trigger: 'change' },
  })

  const form = ref({ supplierType: '', settleDay: 1, backInfoList: [] }) // 编辑信息
  const supplierPageData = usePageDict('supplierPageData') // 供应商类型枚举

  const formRef = ref()

  const showModal = ref(false)
  const show = () => {
    showModal.value = true
  }
  const onClose = () => {
    showModal.value = false
    form.value = { supplierType: '', settleDay: 1, backInfoList: [] }
  }
  const validateFormFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  const emit = defineEmits(['addNameOk'])
  const onConfirm = () => {
    return new Promise((resolve, reject) => {
      validateFormFn()
        .then(async () => {
          delete form.value.dateContract
          form.value.supplierType = form.value.formSupplierType.toString()

          const param = {
            ...form.value,
          }
          supplierSave(param)
            .then((res) => {
              emit('addNameOk', res.result)
              onClose()
              resolve()
            })
            .catch(() => {
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }
  defineExpose({
    show,
  })
</script>
<style lang="less" scoped>
  .s-form {
    :deep(.custom-divider) {
      margin-top: 0;
    }
    .h-content {
      margin-bottom: 20px;
    }
  }
  .mr-40px {
    margin-right: 40px;
  }
  .upload-wrapper {
    padding: 20px 0 0;
  }
  .alert-txt {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
    line-height: 22px;
  }
  .settlement-method {
    width: 438px;
    background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid #e5e8ef;
    margin-top: 16px;
    box-sizing: border-box;
    padding: 16px;

    :deep(.arco-radio-group) {
      display: flex;
    }
    :deep(.arco-radio) {
      width: max-content;
    }
    :deep(.arco-form-item) {
      margin-bottom: 15px;
    }
  }
  .day-box {
    width: 372px;
    display: flex;
    background: rgba(247, 248, 250, 0.5);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    box-sizing: border-box;
    padding: 16px;
    // margin-top: 16px;
    align-items: center;

    .day-txt {
      margin-left: 16px;
      white-space: nowrap;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2129;
      line-height: 22px;
    }
  }
</style>
